<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九个超级实用的 ES6 特性</title>
    <script>
        // 1.展开操作符
        const test1 = ['阿珂', '宫本武藏', '橘右京']
        const test2 = ['孙悟空', '猪八戒', ...test1]
        console.log(test2) // ["孙悟空", "猪八戒", "阿珂", "宫本武藏", "橘右京"]

        const test3 = {
            name: 'libai',
            reName: 'libaibai'
        }
        const test4 = {
            ...test3,
            era: '唐朝'
        }
        console.log(test4) // {name: "libai", reName: "libaibai", era: "唐朝"}

        // 2.剩余参数  可用来数字累加
        function add(first, second, ...remaining) {
            return first + second + remaining.reduce((acc, curr) => acc + curr, 0)
        }
        console.log(add(1, 2, 3, 4, 5)) // 15

        // 3.字符串插值
        var name = 'zhangfan'
        var age = 18
        function test5() {
            const _this = this
            return `Full information:
                name: ${this.name}
                age: ${this.age}
            `
        }
        // console.log(test5()) // Full information:
        //                     name: zhangfan
        //                     age: 18

        // 4.简写属性
        // ES5:
        function test6() {
            return {
                x: x,
                y: y
            }
        }

        // ES6 可以简写
        function test6() {
            return {
                x,
                y
            }
        }

        // 5.方法属性
        // ES5
        const test7 = {
            add: function (a, b) { return a + b },
            reduce: function (c, d) { return c - d },
            multiply: function (e, f) { return e - f }
        }
        // ES6
        const math = {
            add(a, b) { return a + b },
            reduce(c, d) { return c - d },
            multiply(e, f) { return e - f }
        }

        // 6.解构赋值
        function handle(req, res) { // 臃肿的
            const name = req.body.name
            const description = req.body.description
            const url = req.url
        }
        function handle(req, res) { // 简洁的
            const { body: { name, description } } = req
        }

        // 也可以用于数组
        const arr = [1, 2, 3, 4, 5, 6]
        // const a = arr[0] // 臃肿的
        // const b = arr[2] // 臃肿的

        const [a, , c, ...remain] = arr
        console.log(remain) // [4, 5, 6] ps:remain是随便取的变量名

        // 解构赋值还可以用于函数和参数。函数有不止 2-3 个参数时，
        // 使用一个对象收集所有参数是 JavaScript 的事实标准

        // function doSomething(config) {  // 臃肿的
        //     if (config.a) {... }
        //     if (config.b) {... }
        //     if (config.c) {... }
        // }

        // function doSomething({ a, b, c }) {
        //     if (a) {... }
        //     if (b) {... }
        //     if (c) {... }
        // }

        // 7.find() findIndex() some() includes() 博客有写

        // 8.异步方案
        // function doSomething() {
        //     return new Promise((resolve, reject) => {
        //         setTimeout(() => {
        //             resolve(done)
        //         }, 3000)
        //     })
        // }
        // doSomething().then(arg => {
        //     console.log(done, arg)
        // })

        async function getItems() {
            try {
                const user = await getUser();
                const order = await getOrderByUser(user);
                const items = await getOrderItemsByOrder(order);
                return items;
            } catch (err) {
                // 在这里处理错误，建议返回某个值或者重新抛出错误
            }
        }
        // function getUser() {
        //     console.log('aaa')
        // }
        // function getOrderByUser(val) {
        //     console.log(val)
        // }
        // function getOrderItemsByOrder(val) {
        //     console.log(val)
        // }
        getItems().then(items => {
            // 处理排序后的成员
            // console.log(user)
            // console.log(getOrderByUser())
            // console.log(getOrderItemsByOrder())
        })
    </script>
</head>

<body>

</body>

</html>